<template>
  <div class="gdsybj">
    <div class="title">
      <img src="../../../../assets/images/binzhou/bt-3.png" alt="" />
    </div>
    <div class="tabs">
      <div :class="activeType === '1' ? 'active' : ''" class="tab1 tab" @click="activeType = '1'">
        <span>输变配系统数字员工</span>
      </div>
      <div :class="activeType === '2' ? 'active' : ''" class="tab2 tab" @click="activeType = '2'">
        <span>光伏发电储能电动汽车数字员工</span>
      </div>
    </div>
    <div v-if="activeType === '1'" class="jdybj-info">
      <img src="../../../../assets/images/binzhou/jdybj-img-1.png" alt="" />
      <div v-if="inspectionRobotList[0]" class="info">
        <div class="robotName" @click="clickRobot">{{ inspectionRobotList[0].robotName }}</div>
        <div>所属班组：{{ inspectionRobotList[0].robotGroup }}</div>
        <div>节省人天：{{ inspectionRobotList[0].saveDay }}</div>
      </div>
    </div>
    <div v-if="activeType === '2'" class="jdybj-info">
      <img src="../../../../assets/images/binzhou/jdybj-img-2.png" alt="" />
      <div v-if="inspectionRobotList[1]" class="info">
        <div class="robotName" @click="clickRobot">{{ inspectionRobotList[1].robotName }}</div>
        <div>所属班组：{{ inspectionRobotList[1].robotGroup }}</div>
        <div>节省人天：{{ inspectionRobotList[1].saveDay }}</div>
      </div>
    </div>
    <div class="echarts">
      <div id="echart-jqrzb" class="echart"></div>
      <div id="echart-xlts" class="echart"></div>
    </div>
    <modal-dialog :show="showVideo" @close="showVideo = false">
      <video width="1200" class="video" :src="videoUrl" autoplay controls loop></video>
    </modal-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, watchEffect, ref, onUnmounted, watch } from 'vue'
  import * as echarts from 'echarts'
  import ModalDialog from '@/components/Binzhou/modal-dialog.vue'
  import type {
    HighestEfficiencyImprovement,
    DigitalSupplyStation,
    RobotSpecialty,
    InspectionRobot
  } from '@/api/data'

  const props = defineProps({
    inspectionRobotList: {
      type: Array as () => InspectionRobot[],
      default: () => {
        return []
      }
    },
    robotSpecialtyList: {
      type: Array as () => RobotSpecialty[],
      default: () => {
        return []
      }
    },
    highestEfficiencyImprovementList: {
      type: Array as () => HighestEfficiencyImprovement[],
      default: () => {
        return []
      }
    }
  })

  watch(
    props,
    (newVal, oldVal) => {
      showJqrzb()
      showXlts()
    },
    {
      deep: true
      // immediate: true
    }
  )

  let activeType = ref('1')

  let showVideo = ref(false)

  let videoUrl = ref(window.location.origin + '/videos/gj.mp4')

  onMounted(() => {
    // showJqrzb()
    // showXlts()
  })

  const showJqrzb = () => {
    var series_data = props.robotSpecialtyList.map((item) => {
      return {
        name: item.major,
        value: item.majorValue,
        itemStyle: {
          color: {
            配电: '#482BD3',
            输电: '#368DA4',
            运检: '#33CDB4',
            调度: '#1F89E3',
            变电: '#60a3dd'
          }[item.major]
        }
      }
    })
    var options = {
      grid: {
        top: '10%',
        left: '3%',
        right: '3%',
        bottom: '10%',
        containLabel: true
      },
      title: {
        text: '机器人各专业的占比',
        bottom: 0,
        left: 'center',
        textStyle: {
          color: '#ffffff',
          fontSize: 12
        }
      },
      series: [
        {
          name: '机器人各专业的占比',
          type: 'pie',
          radius: '85%',
          label: {
            position: 'inner',
            color: '#ffffff'
          },
          data: series_data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    var eCharts = echarts.init(document.getElementById('echart-jqrzb')!)
    eCharts.setOption(options)
  }

  const showXlts = () => {
    var xAxis_data = props.highestEfficiencyImprovementList.map((item) => {
      return item.robotName
    })
    var series_data = props.highestEfficiencyImprovementList.map((item) => {
      return item.improveRate
    })
    var options = {
      grid: {
        top: '20%',
        left: '3%',
        right: '3%',
        bottom: '20%',
        containLabel: true
      },
      title: {
        text: '效率提升最高的5个机器人',
        bottom: 0,
        left: 'center',
        textStyle: {
          color: '#ffffff',
          fontSize: 12
        }
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#1AB7E4',
            opacity: 0.5
          }
        },
        axisLabel: {
          show: false,
          color: '#ffffff',
          fontSize: 9,
          rotate: 75
        },
        data: xAxis_data
      },
      yAxis: {
        max: series_data[0] > 100 ? (Math.floor(series_data[0] / 20) + 1) * 20 : 100,
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 12
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#1AB7E4',
            opacity: 0.5
          }
        }
      },
      series: [
        {
          data: series_data,
          barWidth: 11,
          label: {
            show: true,
            formatter: '{b}',
            width: 11,
            overflow: 'break',
            position: 'insideBottom',
            fontSize: 8
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              { offset: 0, color: '#145069' },
              { offset: 1, color: '#21B5C3' }
            ])
          },
          type: 'bar'
        }
      ]
    }
    var eCharts = echarts.init(document.getElementById('echart-xlts')!)
    eCharts.setOption(options)
  }

  const clickRobot = () => {
    console.log('----------clickRobot---------')
    showVideo.value = true
  }
</script>

<style lang="scss" scoped>
  .gdsybj {
    .title {
      width: 359px;
      height: 42px;
      background-image: url('@/assets/images/binzhou/bt-bg-3.png');
      background-size: 100% 100%;
      padding-top: 14px;
      padding-left: 19px;
      img {
        height: 16px;
      }
    }
    .tabs {
      display: flex;
      padding: 24px 8px 31px 11px;
      justify-content: space-between;
      .tab1 {
        width: 139px;
        height: 32px;
        background-image: url('@/assets/images/binzhou/tab-138.png');
      }
      .tab2 {
        width: 194px;
        height: 32px;
        background-image: url('@/assets/images/binzhou/tab-194.png');
      }
      .tab {
        background-size: 100% 100%;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        line-height: 32px;
        color: #ffffff;
        cursor: pointer;
      }
      .active {
        color: #00fff0;
      }
    }
    .jdybj-info {
      padding: 0 8px 0 11px;
      position: relative;
      img {
        width: 341px;
        height: 296px;
      }
      .info {
        position: absolute;
        top: 20px;
        left: 30px;
        font-size: 12px;
        color: #ffffff;
        opacity: 0.8;
        .robotName {
          cursor: pointer;
        }
      }
    }
    .echarts {
      display: flex;
      .echart {
        flex: 1;
        height: 240px;
      }
    }
  }
</style>
